<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/10/3 0003
  Time: 23:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link href="<%=request.getContextPath()%>/css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
    <link href="<%=request.getContextPath()%>/css/style.css" rel="stylesheet" type="text/css">
    <link rel='stylesheet' href='https://unicons.iconscout.com/release/v2.1.9/css/unicons.css'>
    <link href="<%=request.getContextPath()%>/css/codemirror/codemirror.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/codemirror/ambiance.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/foot.css" />
    <link href="<%=request.getContextPath()%>/css/index01.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/loading.css" rel="stylesheet" type="text/css">



    <link rel="stylesheet" href="<%=request.getContextPath()%>/codemirror/codemirror.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/codemirror/theme/dracula.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/codemirror/addon/hintow-hint.css">
    <link rel="stylesheet" type="texts" href="<%=request.getContextPath()%>/layuis/layui.css">

    <script src="<%=request.getContextPath()%>/codemirror/codemirror.js"></script>
    <script src="<%=request.getContextPath()%>/codemirror/mode/groovy/groovy.js"></script>
    <script src="<%=request.getContextPath()%>/codemirror/mode/clike/clike.js"></script>
    <script src="<%=request.getContextPath()%>/codemirror/addon/hintow-hint.js"></script>
    <script src="<%=request.getContextPath()%>/codemirror/addon/hint/sql-hint.js"></script>

    <script src="<%=request.getContextPath()%>/js/jquery.min.js"></script>

    <style>
        html {
            font-family: 微软雅黑, serif;
            color: #333333;
        }

        a {
            color: #1D8CE0;
            cursor: pointer;
        }

        * {
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script>
        function login(){
            if (document.getElementById("login").style.display==="none") {
                document.getElementById("login").style.display="block";
            }else {
                document.getElementById("login").style.display="none";
            }
        }
    </script>
</head>
<body style="">



<%--导航条--%>
<%@include file="../common/nav.jsp"%>

<div class="container-fluid"  style="background-color: white ">
    <div class="col-md-12">
        <p style="font-size: 20px;font-weight: bold;margin-left: 10px"><b>编程题</b> </p>

    </div>
    <div class="col-md-12" style="border-bottom: black 1px solid"></div>
    <div class="col-md-12" style="height: 10px"></div>
</div>


<div class="container-fluid"  style="height:80%;background-color: white" >

    <%--题目展示区--%>
    <div class="col-md-4" >
        <div style="">
            <div style="height: 15%">
                <p style="font-size: 19px;font-weight: bold"><b>题目详情</b></p>
                <div id="stem" style="font-weight: bolder;"></div>
            </div>
            <div style="">
                <p style="font-size: 18px;font-weight: bold;margin-left: 10px"><b>示例</b> </p>
                <div style="height: 25%;background-color: #F5F5F5;margin-top: 5px">
                    <p style="font-size: 15px;font-weight: bold;margin-left: 10px">输入 :</p>
                    <p id="input" style="margin-left: 10px;font-size: 13px;font-weight: bold;width: 95%; margin: 0 auto;"></p>
                </div>
                <div style="height: 30%;background-color: #F5F5F5;margin-top: 3%">
                    <p style="font-size: 15px;font-weight: bold;margin-left: 10px">输出 :</p>
                    <p id="out" style="margin-left: 10px;font-size: 13px;font-weight: bold;width: 95%; margin: 0 auto;"></p>

                </div>
            </div>
        </div>
    </div>
    <%--题目展示区结束--%>

    <%--编程区--%>
    <div class="col-md-8" style="height: 100%;">
        <div style="border: aliceblue 5px solid">
            <textarea class="form-control" id="code" name="code"style="font-size: 20px;"></textarea>
            <script>
                var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                    mode: "text/groovy",
                    mode: "text/x-java", //实现Java代码高亮
                    lineNumbers: true,	//显示行号
                    theme: "dracula",	//设置主题
                    lineWrapping: true,	//代码折叠
                    foldGutter: true,
                    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                    matchBrackets: true,	//括号匹配
                    className: "codemirror"
                });
                editor.setSize('100%','90%')
                editor.setOption();
            </script>
        </div>

        <div id="result"></div>
    </div>
    <%--编程区结束--%>
</div>
</div>
<div style="float: right;margin-right: 2%;">
    <button type="button" id="submit" class="btn-info" style="width: 100px;height: 40px;border: none;margin-top: 10px;">点击运行</button>

    <a href="finaltest.html"><button class="btn-info" style="width: 100px;height: 40px;border: none;margin-top: 10px;">提交</button></a>
</div>

<script type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
<script src="../js/codemirror.js"></script>
<script src="../js/mode/clike/clike.js"></script>

<script>
    var parper= ${parper};
    var questions = parper.programmingList;
    var question = questions[0];
    $("#stem").html(question.proStem);//题目
    $("#input").html(question.proInput);//示例输入
    $("#out").html(question.proAnswer);//示例输出


    //点击运行按钮,将代码发送到ParperAction,在后台运行完后将运行结果返回回来
    $("#submit").click(function () {

        let value = editor.getValue();//提取输入框的代码
        //传两个数据   代码和语言类型
        $.post("/yuezhi/parper/comp.action",{"code":value,"lang":"java"},function (data) {
            //将返回的运行结果写入html
            $("#result").html(data.data)
        })

    })



</script>



</body>
</html>
